vue.js3: 安装使用vue |
您所在的位置：网站首页 › vue router back 0 › vue.js3: 安装使用vue |
vue.js3: 安装使用vue
|
一，vue-router的官网:
1,官网:
https://router.vuejs.org/
2,在npmjs的地址:
https://www.npmjs.com/package/vue-router
3,文档地址:
https://router.vuejs.org/zh/introduction.html
说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest 对应的源码可以访问这里获取： https://github.com/liuhongdi/ 或: https://gitee.com/liuhongdi 说明：作者:刘宏缔 邮箱: [email protected] 二，安装vue-router 1,从命令行安装 liuhongdi@lhdpc:/data/vue/touch$ npm install --save vue-router@4 added 2 packages in 3s 2,查看vue-router安装的版本: liuhongdi@lhdpc:/data/vue/touch$ npm list vue-router [email protected] /data/vue/touch └── [email protected] 三，代码: 1,创建两个页面: views/code/Code.vue 去首页 import {useRouter,useRoute} from "vue-router"; import {onMounted} from "vue"; export default { name: "CodeImg", setup() { const router = useRouter(); const Route = useRoute(); onMounted(() => { console.log("获取到的参数:", Route.query); console.log("获取到的参数codeId:", Route.query.codeId); }); const goLink = () => { router.push({ name: 'home', query: { homeId: "hello" }}); //router.push({ path: '/home/home', query: { homeId: "hello" }}); } return { goLink, } } } views/home/Home.vue 去code二维码页面 import {onMounted} from "vue"; import {useRoute} from 'vue-router' export default { name: "HomePage", setup() { const Route = useRoute(); //获取到值 onMounted(() => { console.log("获取到的参数:", Route.query); console.log("获取到的参数:", Route.query.homeId); }); } } 2,创建js文件: route/index.js import {createRouter, createWebHashHistory} from 'vue-router'; const Home = () => import("../views/home/Home") const Code = () => import("../views/code/Code") const routes = [ { path: "/", redirect: '/home/home' }, { path: "/home", component: Home, redirect: '/home/home', children: [ { path: 'home', name: "home",meta:{title:"网站首页",top:"0"}, component: Home }, ] }, { path: "/code", component: Code, redirect: '/code/code', children: [ { path: 'code', name: "code",meta:{title:"二维码",top:"0"}, component: Code }, ] } ] // Vue-router新版本中，需要使用createRouter来创建路由 export default createRouter({ // 指定路由的模式,此处使用的是hash模式 history: createWebHashHistory(), routes // short for `routes: routes` }) 3,在main.js中调用route import { createApp } from 'vue' import App from './App.vue' import router from './route' const app = createApp(App) app.use(router) app.mount('#app') 4,app.vue export default { name: 'App', components: { } } #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 0px; } html,body { margin: 0; height:100%; }说明：把默认的HelloWorld替换成 四，测试效果
|
【本文地址】